
<a data-toggle="modal"  href="#myModal" class="btn pull-left">添加</a>
<form class="modal hide fade form-horizontal"  method="post" id="myModal" action="/post/modal?id=2">
    <!--<div id="myModal" class="modal hide fade">-->
    <div class="modal-header">
        <a class="close" data-dismiss="modal" >&times;</a>
        <h3>请键入你所需要的名称</h3>
    </div>
    <div class="modal-body" style="overflow:visible;">
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="element_name">项目名称</label>
                <div class="controls">
                    <input type="text" class="input-xlarge typeahead" id="element_name" name="element_name" data-provide="typeahead" data-items="10" autocomplete="off">
                </div>
            </div>
        </fieldset>
    </div>
    <div class="modal-footer middle">
        <button type="submit" class="btn btn-primary">保存</button>
        <a href="#" class="btn" data-dismiss="modal" >关闭</a>
    </div>
    <!--</div>-->
</form>



<script>

    $(function(){
        $('#myModal').modal({
            backdrop:true,
            keyboard:false,
            show:false
        });

        $('.typeahead').typeahead({
            source:function(query, process)
            {
                $.ajax({
                    url: '/post/search',
                    type: 'POST',
                    data: {searchCD:$('#element_name').val()},
                    dataType: 'json',
                    async: true,
                    success: function(msg)
                    {
                        process(msg);
                    }
                });
            },
            appendToBody : true
        });

        $("#list1").on("DOMNodeInserted", function () {
        });
    });
</script>

<br/>
<br/>
<a href="javascript:;" class="qwer-add">添加</a>
<div id="list1">
<br/>
<br/>
<h4>默认状态</h4>

<div class="control-group form-horizontal"  >
    <label class="control-label-small" >名称</label>
    <p class="ccd controls-text-small" >kkk</p>
    <div class="controls-small ccd-input" style="display:none; padding-top:5px">
        <input type="text" class="span2 typeahead"  style="background-color: #f7f7f7" value="kkk" data-provide="typeahead" data-items="10"
               data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]' autocomplete="off">
        <input type="hidden" value="hhos">
        <a class="ccd-input-submit">确定</a>
        <a href="javascript:;" class="ccd-input-cancel">取消</a>
        <a class="ccd-input-delete">删除</a>
    </div>
</div>
</div>
<br/>
<hr/>
<br/>
<h4>双击情况</h4>
<div class="control-group form-horizontal"  >
    <label class="control-label-small " >名称</label>
    <div class="controls-small">
        <div class="input-append">
            <input class="span2" id="input_name" type="text">
            <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    操作
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">确定</li>
                    <li><a href="#">取消</li>
                    <li><a href='#'>删除</li>
                </ul>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function(){
        var mutex_input_dblclick = 0;

        $(".ccd").live("dblclick",function(){
            if(mutex_input_dblclick) return;
            else mutex_input_dblclick=1;

            $(this).hide();
            $(this).parent().children(".ccd-input").show();
        });

        $(".ccd-input-submit").live("click",function(){
            var old = $(this).parent().children("input[type='text']").val();
            $(this).parent().parent().children("p").text(old);
            $(this).parent().hide();
            $(this).parent().parent().children(".ccd").show();
            mutex_input_dblclick = 0;
        });

        $(".ccd-input-cancel").live("click",function(){
            $(this).parent().hide();
            $(this).parent().parent().children(".ccd").show();
            mutex_input_dblclick = 0;
        });

        $(".ccd-input-delete").live("click",function(){
            $(this).parent().parent().remove();
            mutex_input_dblclick = 0;
        });


        $(".qwer-add").bind("click",function(){
            testfunc();
        });

        function testfunc(){
            if(mutex_input_dblclick) return;
            var html='<div class="control-group form-horizontal"><label class="control-label-small" >名称</label><p class="ccd controls-text-small" >kkk</p><div class="controls-small ccd-input" style="display:none; padding-top:5px"><input type="text" class="span2 typeahead"  style="background-color: #f7f7f7" value="kkk" data-provide="typeahead" data-items="10"autocomplete="off"><input type="hidden" value="hhos"><a class="ccd-input-submit">确定</a><a href="javascript:;" class="ccd-input-cancel">取消</a><a class="ccd-input-delete">删除</a></div></div>';
            $("#list1").append(html);

            var that = $("#list1").children().last();

            mutex_input_dblclick=1;

            $(that).children(".ccd").hide();
            $(that).children(".ccd-input").show();
        };
    });
</script>


<div class="form-search">
    <div class="input-append">
        <input type="text" class="span2 input-typeahead" data-provide="typeahead" data-items="10" autocomplete="off">
        <span class="add-on" data-toggle="modal" href="#modal-create"><i class="icon-remove"></i></span>
        <span class="add-on"><i class="icon-search"></i> Search</span>
    </div>
</div>

<form class="modal hide fade form-horizontal" id="modal-create">
    <div class="modal-header">
        <a class="close" data-dismiss="modal" >&times;</a>
        <h4>类图ClassDiagram未包含元素xxx</h4>
    </div>
    <div class="modal-body text-center" style="overflow:visible;">
        <h3>是否创建xxx？</h3>
    </div>
    <div class="modal-footer">
        <div class="text-center">
            <button class="btn btn-primary" id="create-cd">创建类</button>
            <button class="btn btn-primary" id="create-relation">创建关系</button>
            <button class="btn" data-dismiss="modal">取消</button>
        </div>
    </div>
</form>
<script>

    $(function(){
        $('#create-cd').live("click",function(){
            $('#modal-create').modal('hide');
        });

        $('#create-relation').live("click",function(){
            $('#modal-create').modal('hide');
        })
    });
</script>


